<template>
  <div>
    <el-form
      ref="form"
      label-position="left"
      :label-width="display === 'grid' ? '120px' : '100px'"
      :class="'c-' + display"
    >
      <template v-if="formItems.length">
        <el-form-item
          :label="item.argTitle + ':'"
          :required="item.mustFill === 1 ? true : false"
          v-for="item in formItems"
          :key="item.argId"
          :class="{ 'long-form': isLongItem(item.argType) }"
        >
          <form-item-generator
            :readonly="!isEdit"
            :ele-item="item"
          ></form-item-generator>
        </el-form-item>
      </template>
      <template v-else>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-form>
  </div>
</template>

<script>
import FormItemGenerator from "./FormItemGenerator";
export default {
  name: "FormGenerator",
  props: {
    catalogue: {
      type: Object,
      default: () => {},
    },
    display: {
      type: String,
      default: "grid",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    FormItemGenerator,
  },
  data() {
    return {};
  },
  computed: {
    formItems() {
      if (this.isEdit) {
        return this.catalogue.args;
      } else {
        return this.catalogue.args.filter(
          (i) =>
            i.argData !== null &&
            i.argData !== undefined &&
            i.argData !== "" &&
            i.argData !== []
        );
      }
    },
  },
  methods: {
    isLongItem(type) {
      return [2, 8, 9].includes(type);
    },
  },
};
</script>
<style lang="scss" scoped>
.c-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 50px;
}
.c-flex {
  display: flex;
  flex-direction: column;
}
.long-form {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
